'use strict';

import {
    StyleSheet,
    View,
    Text,
    LinkingIOS,
    ListView,
    TouchableOpacity,
    Navigator,
    Image,
} from 'react-native'
import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import URL from '../config/server';
import {Utils} from '../config/utils';
import {Key} from '../config/key';


var NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, nextState) {
        return (
            <TouchableOpacity style={{flex: 1, justifyContent: 'center'}}
                              onPress={() => navigator.parentNavigator.pop()}>
                <View style={{flexDirection:'row',padding:5}}>
                    <Icon name="ios-arrow-back" size={18} color="#ffffff" style={{alignSelf:'center'}}/>
                    <Text style={{color: 'white', margin: 3,fontSize:16}}>
                        返回
                    </Text>
                </View>
            </TouchableOpacity>
        );
    },
    RightButton(route, navigator, index, nextState) {
        return null;
    },
    Title(route, navigator, index, nextState) {
        return (
            <Text style={{color: 'white', margin: 10, fontSize: 20}}>
                搜索结果
            </Text>
        );
    }
};

export default class SearchContent extends React.Component {
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds.cloneWithRows(['row 1', 'row 2']),
            loadMore: false,
            haveData: 0
        }
    }

    componentWillMount() {
        this.fetchData();
    }
    fetchData(){
        let that = this;
        const CONNECT = URL.local + 'stock/'+this.props.message.userLevel+'/1/20?code='+this.props.message.text;
        console.log(CONNECT);
        Utils.transport1(CONNECT,{},function (data) {
            if (data == 0) {
                that.setState({
                    haveData: 1
                })
            } else {
                console.log(data);
                that.setState({
                    dataSource: that.state.dataSource.cloneWithRows(data),
                    haveData: 0,
                    loadMore: false
                });
            }
        })
    }
    renderRow(item) {
        return (
            <View style={styles.Items}>
                <Text style={[styles.mtitle,{textAlign:'left',paddingLeft:10}]}>
                    {item.releaseTime}
                </Text>
                <Text style={styles.title}>
                    {item.stockCode}
                </Text>
                <Text style={styles.title}>
                    {item.stockName}
                </Text>
            </View>
        );
    }
    handleEnd() {
        console.log("Ending!!!");
        this.setState({
            dataNum: this.state.dataNum + 20,
            loadMore: false
        }, function cb() {
            this.fetchData()
        });
    }
    _renderHeader() {
        return (
            <View style={styles.Items}>
                <Text style={[styles.mtitle,{textAlign:'left',paddingLeft:10}]}>
                    发布时间
                </Text>
                <Text style={styles.title}>
                    股票代码
                </Text>
                <Text style={styles.title}>
                    股票名字
                </Text>
            </View>
        );
    }
    _renderList() {
        if (this.state.haveData == 0) {
            return (
                <ListView
                    renderHeader={this._renderHeader}
                    style={styles.contentView}
                    dataSource={this.state.dataSource}
                    renderRow={this.renderRow.bind(this)}
                    renderFooter={this._renderFooter.bind(this)}
                    onEndReached={this.handleEnd.bind(this)}
                    onEndReachedThreshold={-10}
                />
            );
        } else if (this.state.haveData == 1) {
            return (
                <View style={styles.listHeader}>
                    <Text style={{textAlign:'center',fontSize:17}}>
                        数据为空
                    </Text>
                </View>
            );
        } else {
            return null;
        }
        return(
            <View>
                <Text>
                asd
                </Text>
            </View>
        )
    }
    _renderFooter() {
        if (this.state.loadMore) {
            return (
                <View style={styles.footerload}>
                    <ActivityIndicatorIOS
                        animating={true}
                        style={{justifyContent:'center'}}
                    />
                    <Text>
                        加载数据...
                    </Text>
                </View>
            )
        } else {
            return null;
        }
    }
    renderScene(route, navigator) {
        return (
            <View style={styles.container}>
                {this._renderList()}
            </View>
        );
    }

    render() {
        return (
            <Navigator
                renderScene={this.renderScene.bind(this)}
                navigator={this.props.navigator}
                navigationBar={
            <Navigator.NavigationBar
                style={{backgroundColor: '#e02820', alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          }/>
        );
    }
}


var styles = StyleSheet.create({
    item: {
        height: 50,
        margin: 20
    },
    link: {
        height:25,
        fontSize: 16,
        color: '#0000cd',
        textDecorationLine: 'underline'
    },
    p: {
        fontSize: 16
    },
    container: {
        marginTop: 64,
        flex: 1,
        backgroundColor: '#ffffff'
    },
    newstitle: {
        marginTop: 5,
        height: 30,
        width: 200
    },
    Refresh: {
        flex: 2,
        justifyContent: 'center',
        alignItems: 'center',
        paddingRight: 10
    },
    Items: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 3,
        backgroundColor: '#ffffff',
        borderBottomWidth: 0.5,
        borderColor: '#dddddd'
    },
    footerload: {
        height: 30,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row'
    },
    contentView: {
        flex: 12,
        backgroundColor: '#ffffff'
    },
    listView: {
        flex: 12,
        paddingTop: 20,
        backgroundColor: '#ffffff',
        justifyContent: 'center',
        alignItems: 'center'
    },
    down: {
        flex: 1,
        backgroundColor: '#000000',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    bottomText: {
        flex: 1,
        color: '#ffffff',
        textAlign: 'center',
        fontSize: 16
    },
    rightContainer: {
        flex: 1,
        height: 70,
        justifyContent: 'flex-start'
    },
    title: {
        flex: 2,
        fontSize: 15,
        textAlign: 'center'
    },
    mtitle: {
        flex: 3,
        fontSize: 14,
        color: '#000000',
        textAlign: 'center'
    },
    thumbnail: {
        width: 100,
        height: 70,
        marginRight: 3,
        resizeMode: Image.resizeMode.stretch
    },
    searchBar: {
        marginTop: 10,
        marginLeft: 5,
        marginRight: 5,
        paddingBottom: 0,
        flexDirection: 'row',
        alignItems: 'center',

    },
    searchBarInput: {
        flex: 1,
        height: 30,
        margin: 10,
        paddingLeft: 10,
        borderWidth: 0.5,
        justifyContent: 'center',
        borderColor: '#dddddd'
    },
    spinner: {
        width: 30
    },
    separator: {
        height: 1,
        backgroundColor: '#eeeeee'
    },
    selectedDate: {
        fontSize: 10
    },
    calendar: {
        position: 'absolute',
        top: 32,
        height: Utils.size.height - 72,
        width: Utils.size.width
    },
    segement: {
        borderLeftWidth: 3,
        borderColor: "#e02820",
        position: 'relative',
        left: -10
    },
    dataPicker: {
        borderTopWidth: 0.5,
        borderColor: '#000',
        flex: 1,
        width: Utils.size.width,
        position: 'absolute',
        bottom: 0,
        alignItems: 'center'
    },
    datePicker_title: {
        paddingLeft: 15,
        paddingRight: 15,
        width: Utils.size.width,
        backgroundColor: '#f5f5f9',
        height: 30,
        flexDirection: 'row'
    },
    dateContent: {
        flex: 1
    },
    timeText: {
        flex: 1,
        textAlign: 'center',
        alignSelf: 'center',
        fontSize: 16,
        lineHeight: 22,
        alignItems: 'center',
        justifyContent: 'center'
    },
    dateTouch: {
        flex: 5,
        paddingBottom: 10,
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center',
        letterSpacing: 10
    },
    button: {
        height: 36,
        backgroundColor: '#e02820',
        borderColor: '#e02820',
        borderWidth: 1,
        borderRadius: 2,
        margin: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    }
});
